import React from 'react';

// 引入组件
import { NavBar, Icon } from 'antd-mobile';

// 引入样式文件
import Styles from './index.module.scss'

// 联系代理商
import {connect} from 'react-redux'

// 导入基准路径文件
import {request} from '../../utils/request'

// 导入列表组件
import HouseItem from '../components/HouseItem'
const BMap = window.BMap
let map;
class MapFound extends React.Component {
  // 定义每一层数据的等级 页面加载是显示的是市级的房源信息 点击房源信息后级别++ 显示区级房源信息
  levelData = [
    {
      level:1,zoom:10,className:'circle'
    },
    {
      level:2,zoom:12,className:'circle'
    },
    {
      level:3,zoom:15,className:'square'
    },
  ] 
  levelIndex = 0;
  // 获取坐标点信息
  getClient = (e) => {
    const clientX = e.changedTouches[0].clientX
    const clientY = e.changedTouches[0].clientY
    const x = window.screen.width / 2 - clientX
    const y = window.screen.height / 2 / 2 - clientY
    map.panBy(x,y)
  }
  // 获取房间详细信息
  getHouseInfo = async (id)=>{
   const houseInfo = (await request.get('houses?cityId=' + id)).data.body.list
  //  console.log(res);
   this.setState({
    houseInfo
   })
  }
  // 将请求房源的操作封装
  getHouseData = async(id,center) =>{
    let zindex = 1000;
  // 请求当前城市的房源信息
 const housesData = (await request.get('/area/map?id=' + id)).data.body
 const mapInfo = this.levelData[this.levelIndex]
 //  设置地图的显示位置及级别
 map.centerAndZoom(center,mapInfo.zoom)
//  console.log(housesData);
 housesData.forEach((item,index) => {
  const point = new BMap.Point(item.coord.longitude, item.coord.latitude)
  const opts = {
    // 指定文本标注所在的地理位置
    position: point,
    offset: new BMap.Size(-30,0)    //设置文本偏移量
  };
  var label = new BMap.Label(`<div class='${mapInfo.className}'><span class='city_name'>${item.label}</span><span class='house_amount'>${item.count}套</span></div>`,opts); 
  label.setStyle({
    backgroundColor:'none',
    border:'none'
  });
  // 添加文本标记
  map.addOverlay(label);  
  // 标记的点击事件 不是原生js的点击 而是百度封装的事件
  label.addEventListener("click", (e)=>{    
    const center = point
    // 当地图级别为3的时候直接显示当前房源的列表信息 
    if(this.levelIndex === 2){
      this.getHouseInfo(item.value)
      // 调用
     this.getClient(e)
    //  等级增加
     zindex++;
    //  修改label的层级 让其显示在最上层
     label.setZIndex(zindex)
      // 显示房源列表页面
      this.setState({
        showHouseList:true
      })
    }else{
       // 地图级别增加
    this.levelIndex++  
    // 点击生成二级数据前先清除原有的覆盖物标识
    setTimeout(() => {
      map.clearOverlays()
    }, 10);
    //  内部调用自己
    this.getHouseData(item.value,center)
    }
});  
}) 
  }
 async componentDidMount(){
  // 获取用户点击的城市
  const city = this.props.cityName
  // 创建地图实例
  map = new BMap.Map('container')
  // 地图初始化后的显示地址以及显示级别
  // map.centerAndZoom(this.props.cityName); 
  // var opts = {type:BMAP_NAVIGATION_CONTROL_LARGE}    
  map.addControl(new BMap.NavigationControl());
   // 开启鼠标滚轮缩放
   map.enableScrollWheelZoom();
  // 定位控件 
  map.addControl(new BMap.GeolocationControl())
  setTimeout(() => {
  // 地图比例尺控件
  map.addControl(new BMap.ScaleControl())
  }, 1000);
  //  地图拖动 房源列表页面隐藏
  map.addEventListener('dragstart',()=>{
    this.setState({
      showHouseList:false
    })
  })
  // 请求当前城市
 const cityData = (await request.get('/area/info?name=' + city)).data.body
    const id = cityData.value
    this.getHouseData(id,city)
  }
  state = { 
    showHouseList:false,
    houseInfo:[]
   }
  render() { 
    const {showHouseList,houseInfo} = this.state
    return ( 
      <div className='box'>
      {/* 头部导航栏 */}
      <NavBar
      mode="light"
      icon={<Icon type="left" />}
      onLeftClick={() => this.props.history.goBack()}
    >地图找房</NavBar>
    {/* 地图容器 */}
    <div className={Styles.map}>
      <div className={Styles.map_container} id='container'></div>
    </div>
     {/* 房源详细信息列表 */}
     <div className={
       `${Styles.houselist} ${showHouseList === true ? Styles.iSshow : ''}`
     }>
       {/* 房源列表头部 */}
       <div className={Styles.houselist_head}>
         <span>房屋列表</span>
         <span>更多票价</span>
       </div>
       {/* 房源主体 */}
       <div className={Styles.houselist_body}>
      {
        // 房源详细数据
       houseInfo.map(item => (
        <HouseItem key={item.houseCode} item={item}></HouseItem>
     ))
      }
      </div>
       </div>
    </div>
     );
  }
}
 const mapStateToProps = (state) => ({
   cityName:state.address.city
 })
export default connect(mapStateToProps)(MapFound);